<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Event attaching comparsion</title>
	<style type="text/css">
	.trigger1, .trigger2, .trigger3 {
		margin-left: 5px;
	}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.js"></script>
	<script type="text/javascript" src="http://reglib.googlecode.com/svn/trunk/reg.js"></script>

	<!--[if IE]>
    <script type="text/javascript" src="ie-mutation-events.js"></script>
  <![endif]-->
	<script type="text/javascript">
function attachEvents(node) {
	// node is an optional callback to filter()
	// that applies rules only for new nodes 
	node = node || '*';
	$('.container1 .trigger1').filter(node).click(function(e) {
		alert('mutation events work');
		e.preventDefault();
	});
}
$(function() {
	// mutation events
	attachEvents();
	$('.add1').click(function() {
		$('.container1').append('<a href="#" class="trigger1">.trigger</a>');
	});
	$('.move1').click(function() {
		$('.container1 a:first').insertBefore('.container1');
	});
	// node removed from DOM
	$(document).bind('DOMNodeRemoved', function(e) {
		//alert('DOMNodeRemoved');
		// add information property, that node has been detached 
		e.target.skipEventAttaching = true;
	});
	$(document).bind('DOMNodeInserted', function(e) {
		attachEvents(function(node){
			return !e.target.skipEventAttaching && 
				this == e.target
		});
	});
	
	// delegation jquery
	$('.add2').click(function() {
		$('.container2').append('<a href="#" class="trigger2">.trigger</a>');
	});
	$('.move2').click(function() {
		$('.container2 a:first').insertBefore('.container2');
	});
	$('.container2 .trigger2').live('click', function(e) {
		alert('$.live works');
		e.preventDefault();
	});
	
	// delegation reglib
	$('.add3').click(function() {
		$('.container3').append('<a href="#" class="trigger3">.trigger</a>');
	});
	$('.move3').click(function() {
		$('.container3 a:first').insertBefore('.container3');
	});
	reg.click(".container3 .trigger3", function(e) {
		alert('reglib works');
		e.preventDefault();
	});
});
	</script>
</head>
<body>
	<h1>Event attaching comparsion</h1>
	<div>Tested CSS selector: <strong><code>.container .trigger</code></strong></div>
	<h2>jQuery 1.3 using mutation events</h2>  
	<div>

		<a href="#" class='add1'>add node</a> 
		<a href="#" class='move1'>move node</a>
	</div> 
	<div class='container1'>.container
		<a href="#" class='trigger1'>.trigger</a>
	</div>
	<h2>Event delegation jQuery 1.3 using $.live</h2>   
	<div> 
		<a href="#" class='add2'>add node</a> 
		<a href="#" class='move2'>move node</a>

	</div> 
	<div class='container2'>.container
		<a href="#" class='trigger2'>.trigger</a>
	</div>
	<h2>Event delegation reglib</h2>   
	<div> 
		<a href="#" class='add3'>add node</a> 
		<a href="#" class='move3'>move node</a>
	</div> 
	<div class='container3'>.container
		<a href="#" class='trigger3'>.trigger</a>

	</div> 
</body>
</html>